<template>
	<view class="content">
		<view class="topBox">
			<view>
				<p style="font-size: 38rpx;font-weight: bold;">支付成功！</p>
				<p>已完成支付，感谢您的购买</p>
			</view>
			<image src="@/static/homeImg/payOk.png" mode=""></image>
		</view>
		<view class="orderDetail">
			<image class="bg-image" src="/static/homeImg/payOkBag.png" mode="widthFix"></image>
			<p class="money"><span style="font-size: 38rpx;">￥</span>{{orderDetail.payMoney}}</p>
			<p class="desc">订单编号：{{orderDetail.orderNo}}</p>
			<p class="desc">下单时间：{{orderDetail.createTime}}</p>
			<p class="desc">支付方式：{{orderDetail.type == 0 ? '微信' : orderDetail.type == 1 ? '余额' : '未知'}}</p>
		</view>
		<view class="button01" @click="goOrderDetail">查看订单</view>
		<view class="button02" @click="goHome">返回首页</view>
		<u-popup :show="show" :closeOnClickOverlay="false" mode="center" :round="10" @close="show = false">
			<view style="padding: 40rpx;width: 686rpx;">
				<view class="" style="text-align: center;font-size: 32rpx;margin-bottom: 40rpx;">添加代理商</view>
				<view class="information">
					<view class="informationForm">
						<p class="leftTitle">代理商名称</p>
						<input v-model="agentInfo.agentNickName" class="rightInput" type="text" placeholder="请输入代理商名称" />
					</view>
					<view style="height: 1rpx;background-color:#DDDDDD;"></view>
					<view class="informationForm">
						<p class="leftTitle">代理商密码</p>
						<input v-model="agentInfo.pwd" password class="rightInput" type="safe-password"
							placeholder="请输入密码" />
					</view>
					<view style="height: 1rpx;background-color:#DDDDDD;"></view>
				</view>
				
				<view class="information" >
					<view class="informationForm">
						<p class="leftTitle">所在地区</p>
						<picker class="rightInput picker" mode="multiSelector" :range="multiArray"
							@change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex">
							<view class="ellipsis">{{ fullAddress || '请选择所在地区' }}</view>
						</picker>
					</view>
					<view style="height: 1rpx;background-color:#DDDDDD;"></view>
				</view>
				<button class="btn" @click="submit">提交</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getProvincial,
		getCity,
		getDistrict,
		addAddress
	} from '@/api/address.js';
	import {
		isGenerateAgent,
		createAgentInformation
	} from '@/api/order.js';
	export default {
		data() {
			return {
				orderDetail: {},
				show: false,
				agentInfo:{},
				multiArray: [
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				fullAddress: '',
				fullAddressIds: ['', '', ''],
				provinceMap: {},
				cityMap: {},
				countyMap: {},
			}
		},
		onLoad(options) {
			console.log('options:', options);
			this.orderDetail = options;
			this.isSetAgentInfo()
			this.loadProvinces();
		},
		methods: {
			goHome() {
				uni.switchTab({
					url: '/pages/platform/index'
				});
			},
			goOrderDetail() {
				console.log(this.orderDetail, "this.orderDetail")
				uni.navigateTo({
					url: '/pages/addOrder/orderDetail?orderId=' + this.orderDetail.orderId
				});
			},
			// 是否生成代理商
			isSetAgentInfo() {
				isGenerateAgent().then(res => {
					if (res.data) {
						this.show = true;
					}
				})
			},
			loadProvinces() {
				const params = {
					pageSize: 99,
					pageNumber: 1
				};
				getProvincial(params).then(res => {
					this.multiArray[0] = res.data.records.map(item => item.name);
					this.provinceMap = res.data.records.reduce((map, item) => ({
						...map,
						[item.name]: item.id
					}), {});
			
					// 自动加载第一个省份的城市数据
					if (this.multiArray[0].length > 0) {
						this.loadCities(0);
					}
				}).catch(error => {
					console.error('Failed to load provinces:', error);
				});
			},
			loadCities(provinceIndex) {
				const provinceName = this.multiArray[0][provinceIndex];
				const provinceId = this.provinceMap[provinceName];
				const params = {
					atProvincialLevelId: provinceId,
					pageSize: 99,
					pageNumber: 1
				};
				getCity(params).then(res => {
					this.multiArray[1] = res.data.records.map(item => item.name);
					this.cityMap = res.data.records.reduce((map, item) => ({
						...map,
						[item.name]: item.id
					}), {});
			
					// 自动加载第一个城市区县数据
					if (this.multiArray[1].length > 0) {
						this.loadCounties(0);
					}
			
					this.multiArray[2] = [];
					this.multiIndex = [provinceIndex, 0, 0];
				}).catch(error => {
					console.error('Failed to load cities:', error);
				});
			},
			loadCounties(cityIndex) {
				const cityName = this.multiArray[1][cityIndex];
				const cityId = this.cityMap[cityName];
				const provinceName = this.multiArray[0][this.multiIndex[0]];
				const provinceId = this.provinceMap[provinceName];
				const params = {
					// atProvincialLevelId: provinceId,
					cityId: cityId,
					pageSize: 99,
					pageNumber: 1
				};
				getDistrict(params).then(res => {
					this.multiArray[2] = res.data.records.map(item => item.name);
					this.countyMap = res.data.records.reduce((map, item) => ({
						...map,
						[item.name]: item.id
					}), {});
			
					this.multiIndex = [this.multiIndex[0], cityIndex, 0];
				}).catch(error => {
					console.error('Failed to load counties:', error);
				});
			},
			bindMultiPickerColumnChange(e) {
				const col = e.detail.column;
				const value = e.detail.value;
				if (col === 0) {
					this.loadCities(value);
				} else if (col === 1) {
					this.loadCounties(value);
				}
			},
			bindMultiPickerChange(e) {
				const index = e.detail.value;
				const provinceName = this.multiArray[0][index[0]];
				const cityName = this.multiArray[1][index[1]];
				const districtName = this.multiArray[2][index[2]];
				const provinceId = this.provinceMap[provinceName];
				const cityId = this.cityMap[cityName];
				const districtId = this.countyMap[districtName];
			
				// 更新 agentInfo 中的字段
				this.agentInfo.addressId = provinceId;
				this.agentInfo.address = provinceName;
				this.agentInfo.shiId = cityId;
				this.agentInfo.shi = cityName;
				this.agentInfo.quXianId = districtId;
				this.agentInfo.quXian = districtName;
				this.fullAddress = `${provinceName}-${cityName}-${districtName}`;
				this.fullAddressIds = [provinceId, cityId, districtId];
			},
			submit(){
				if(!this.agentInfo.agentNickName || !this.agentInfo.pwd|| !this.agentInfo.addressId){
					uni.showToast({
						title:"请填写所有信息",
						icon:'none'
					})
					return
				}
				createAgentInformation(this.agentInfo).then(res=>{
					if(res.code==200){
						uni.showToast({
							title:"提交成功",
							icon:'none'
						})
						this.show = false
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {}

	.topBox {
		width: 100%;
		height: 310rpx;
		background: linear-gradient(125deg, #085CD6 0%, #CA9362 100%);
		display: flex;
		padding: 60rpx 40rpx;
		z-index: 1;

		view {
			width: 540rpx;
		}

		p {
			color: #fff;
			margin-top: 20rpx;
		}

		image {
			width: 100rpx;
			height: 130rpx;
		}
	}

	.orderDetail {
		width: 90%;
		height: 480rpx;
		margin: -80rpx 5% 0rpx 5%;
		position: relative;
		z-index: 2;

		.bg-image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1; // 确保背景图片在内容之下
		}

		.money {
			width: 100%;
			height: 165rpx;
			padding: 40rpx;
			font-weight: bold;
			font-size: 54rpx;
			color: #333333;
			text-align: center;
			border-bottom: 2rpx solid #E3E3E3;
		}

		.desc {
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			margin: 20rpx 40rpx;
		}
	}

	.button01 {
		width: 670rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #1D85E1;
		border-radius: 45rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		margin: auto;
		margin-top: 40rpx;
		text-align: center;
	}

	.button02 {
		width: 670rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #F8F8F8;
		border-radius: 45rpx;
		border: 2rpx solid #1D85E1;
		font-weight: bold;
		font-size: 30rpx;
		color: #1D85E1;
		margin: auto;
		margin-top: 40rpx;
		text-align: center;
	}
	.information {
		background: #FFFFFF;
		position: relative;
		margin: 0 20rpx;
		border-radius: 16rpx;
	
		.informationForm {
			height: 80rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
	
			.leftTitle {
				width: 30%;
				font-weight: 500;
				font-size: 26rpx;
				color: #000;
				font-weight: 600;
				line-height: 80rpx;
				text-align: left;
				font-style: normal;
			}
			.leftTitle::before {
				content: "*";
				color: red;
				margin-right: 4rpx;
			}
	
			.rightInput {
				width: 70%;
				height: 80rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #000;
				line-height: 80rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}
	
	.picker {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: left;
	}
	
	.bottomBox {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		z-index: 1000;
		background-color: white; // 使用变量代替硬编码颜色
		display: flex;
	
		.button {
			width: 80%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #007aff;
			color: #FFFFFF;
			border-radius: 80rpx;
			margin: 20rpx auto;
		}
	}
	.btn{
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		background: #0077FF;
		box-shadow: 0px 6px 12px 2px rgba(204,204,204,0.16);
		border-radius: 20rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-top: 60rpx;
	}
	.ellipsis{
		overflow: hidden;
		/* 隐藏溢出的内容 */
		white-space: nowrap;
		/* 防止文本换行 */
		text-overflow: ellipsis;
		/* 用省略号表示被隐藏的文本 */
	}
</style>